<script lang="ts" setup="">
import { SettingFilled } from '@ant-design/icons-vue'
import useMainStore from '@/store'
import TodoModal from '@/components/todoModal.vue'
import BasicChart from '@/components/eCharts/basic.vue'
import PieChart from '@/components/eCharts/pieChart.vue'
import EditableText from '@/components/editableText.vue'

const router = useRouter()

const { handle_setTag, handle_todoCheckChange, handle_todoInputChange } =
  useMainStore()
const { todoList } = storeToRefs(useMainStore())

const visible = ref<boolean>(false)

const iconList = [
  {
    name: 'Vue',
    path: '/src/static/Vue.png',
    description: '一款用于构建 Web 界面，易学易用，性能出色且功能丰富的框架。'
  },
  {
    name: 'React',
    path: '/src/static/react.png',
    description: '用于构建用户界面的 JavaScript 库。'
  },
  {
    name: 'TypeScript',
    path: '/src/static/typescript.png',
    description: ' TypeScript 是 JavaScript 的一个超集。'
  },
  {
    name: 'JavaScript',
    path: '/src/static/javascript.png',
    description: '所有现代的 HTML 页面都使用 JavaScript。'
  },
  {
    name: 'Html5',
    path: '/src/static/HTML5.png',
    description: 'HTML5是构建Web内容的一种语言描述方式。'
  }
]

let showSetting = ref<boolean>(false)

function handle_toSetting() {
  router.push('/home/setting')
  handle_setTag('设置', '/home/setting')
}

function handle_checkChange(id: number) {
  handle_todoCheckChange(id)
}

function handle_inputChange(text: string, id: number) {
  handle_todoInputChange(text, id)
}
</script>

<template>
  <div class="statistic-container">
    <a-row :gutter="24">
      <a-col :span="12">
        <a-card hoverable>
          <div class="flex justify-evenly align-center">
            <a-avatar :size="100">
              <template #icon>
                <img
                  src="@/static/homeIcon/rng.jpg"
                  alt="avatar"
                />
              </template>
            </a-avatar>
            <div
              class="text-center relative"
              style="width: 200px"
              @mouseenter="showSetting = true"
              @mouseleave="showSetting = false"
            >
              <div class="title-font">Admin</div>
              <div class="content-font">超级管理员</div>
              <div
                v-show="showSetting"
                class="scale-up-center setting absolute pointer"
                @click="handle_toSetting"
              >
                <setting-filled :style="{ fontSize: '25px' }" />
              </div>
            </div>
          </div>
          <a-divider />
          <a-card class="user-content">
            <a-card-grid
              v-for="data in iconList"
              :key="data.name"
              style="width: 20%; height: 220px"
            >
              <div class="text-center">
                <img
                  :src="data.path"
                  :alt="data.name"
                />
              </div>
              <div class="user-content__description">
                {{ data.description }}
              </div>
            </a-card-grid>
          </a-card>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-row
          class="statistic-list flex justify-between"
          :gutter="24"
        >
          <a-col :span="8">
            <a-card
              class="statistic-list__card flex"
              hoverable
            >
              <img
                src="@/static/statisticIcon/user.png"
                alt="userNumber"
              />
              <div>
                <div class="title-font title">用户数量</div>
                <div class="number">4598</div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card
              class="statistic-list__card flex"
              hoverable
            >
              <img
                src="@/static/statisticIcon/download.png"
                alt="downloadNumber"
              />
              <div>
                <div class="title-font title">下载数量</div>
                <div class="number">4396</div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card
              class="statistic-list__card flex"
              hoverable
            >
              <img
                src="@/static/statisticIcon/game.png"
                alt="gamesNumber"
              />
              <div>
                <div class="title-font title">游戏数量</div>
                <div class="number">2200</div>
              </div>
            </a-card>
          </a-col>
        </a-row>
        <a-card
          class="todoList mt-4"
          hoverable
        >
          <a-list :data-source="todoList">
            <template #renderItem="{ item }">
              <a-list-item>
                <EditableText
                  type="todo"
                  v-model:text="item.title"
                  :check="item.checked"
                  @inputChange="handle_inputChange($event, item.id)"
                >
                  <template #default="slotData">
                    <a-checkbox
                      v-model:checked="slotData.check"
                      @change="handle_checkChange(item.id)"
                    >
                      <span :class="slotData.check ? 'done' : ''">
                        {{ slotData.text }}
                      </span>
                    </a-checkbox>
                  </template>
                </EditableText>
              </a-list-item>
            </template>
            <template #header>
              <div class="flex justify-between align-end">
                <div class="title">待办事项</div>
                <div
                  class="add-btn pointer"
                  @click="visible = true"
                >
                  添加
                </div>
              </div>
            </template>
          </a-list>
        </a-card>
      </a-col>
    </a-row>
    <a-row
      :gutter="16"
      class="mt-5"
    >
      <a-col :span="12">
        <a-card hoverable>
          <BasicChart width="776px" />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card hoverable>
          <PieChart width="776px" />
        </a-card>
      </a-col>
    </a-row>
  </div>
  <TodoModal v-model:visible="visible" />
</template>

<style lang="scss" scoped>
.statistic-container {
  transition: all 0.3s;

  @media (max-width: 1080px) {
    &:deep(.ant-row) {
      flex-flow: column nowrap;
      .ant-col {
        max-width: 100%;
      }
    }
  }

  &:deep(.ant-list-header) {
    padding-top: 0;
  }

  &:deep(.ant-card-hoverable) {
    cursor: unset;
  }

  .setting {
    top: 30px;
    right: 13px;
  }

  .title {
    font-size: 20px;
    font-weight: 600;
  }

  .add-btn {
    font-size: 14px;
    color: #38c3ff;
  }
}

.done {
  color: #cccccc;
  font-style: italic;
  text-decoration: line-through;
}

.user-content {
  img {
    width: 50px;
    height: 100%;
  }
  .user-content__description {
    @media (max-width: 1080px) {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}

.statistic-list {
  @media (max-width: 1080px) {
    margin-top: 24px;
    flex-flow: row nowrap !important;
  }
  img {
    width: 100px;
  }

  .title {
    font-size: 28px;
  }

  .number {
    font-size: 26px;
    font-weight: 500;
    color: #38c3ff;
  }

  &:deep(.ant-card-bordered) {
    border: none;
  }

  &:deep(.ant-card-body) {
    text-align: center;
    display: flex;
    align-items: center;
    padding: 14px;
  }
}

.todoList {
  & :deep(.ant-card-body) {
    padding: 24px 12px 24px 24px;
  }

  & :deep(.ant-spin-nested-loading) {
    height: 182px;
    overflow-y: scroll;
  }

  & :deep(.ant-spin-container) {
    margin-right: 10px;
  }
}
</style>
